<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath() ;%>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %>


                    <div class="fieldset1 tabel_col clearFix" id="templateContainer">
                        <div class="caption">
                            <span class="title">问卷</span>
                        </div>
                        <%--<c:forEach items="${qList}" var="question" varStatus="qNum">--%>
                            <%--<div class="fieldBox col_100 ">--%>
                                <%--<div class="field">${qNum.count}.${question.question}</div>--%>
                                <%--<div class="field col_100 clearFix">--%>
                                    <%--<c:forEach items="${question.option}" var="opt" varStatus="">--%>
                                        <%--<span class="col_100 " name="span${opt.id}" id="span${opt.id}"><input name="${question.id}" value="${opt.id}" type="radio">${opt.name} </span>--%>
                                    <%--</c:forEach>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        <%--</c:forEach>--%>

                    </div>

<script type="text/javascript">
    var QRelation = function(){
        this.array = new Array;
        /**
         * item {key:xxx,value:xxx}
         */
        this.add = function(item){
            if(this.had(item)){
                // 已经包含就不添加
            }else{
                // 添加元素
                // 先在第一行添加一个元素
                var t = new Array()
                t.push(item);
                this.array.push(t);
                // 添加到末尾
                for(var relation of this.array){
                    var last = relation[relation.length -1];
                    if(last.value == item.key){
                        relation.push(item);
                    }
                    if(last.key == item.key){
                        relation.push(item);
                    }
                }

            }
        }

        this.getArray = function(id){
            var res = [];
            for(var s of this.array){
                if(s[0].key == id){
                    res.push(s);
                }
            }
            return res.length>0 ? res : null;
        }
        this.had = function(item){
            for(var relation of this.array){
                if(relation){
                    // 检查二维数组的第一行是否包含了这个值，如果包含就不添加。
                    if(this.compare(relation[0],item)){
                        return true;
                    }
                }
            }
            // 没有命中
            return false;
        }
        /**
         * 比较两个节点是否相同
         */
        this.compare = function(a,b){
            if(a.key == b.key){
                if(a.value == b.value){
                    return true;
                }
            }
            return false;
        }
    };
</script>
<script type="text/javascript">
    var templateCd = "<%=request.getParameter("templateCd")%>";
    var id = "<%=request.getParameter("id")%>";
    var qRelation = new QRelation();
    $(function () {
        $.ajax({
            type:"post",
            dataType:"json",
            data:{templateCd:templateCd,id:id},
            url:"<%=path%>/template/view.do",
            success:function (data) {
                if(data){
                    // 生成html
                    genHtml(data);
                    //  注册点击事件
                    // 用来控制前置条件
                    genJS(data);
                }
            }
        })
    });

    /**
     * 生成页面
     * @param data
     *
     */

    function genHtml(data){
        var html = "" ;
        for(var question of data){

            var fieldBox = "<div class=\"fieldBox col_100 \" id=\"field"+question.id+"\">";
            fieldBox += "<div class=\"field\">" + question.qNum + "." + question.question + "</div>";
            fieldBox += "<div class=\"field col_100 clearFix\">";
            var optionList = question.option;
            var ans = question.answer;
            for(var opt of optionList){
                var optType = 1; //选项类型 1单选 2多选 3文本域
                if(opt.optType){
                    optType = opt.optType
                }
                if(optType== 1){
                    var checked = ""; //是否选中
                    if(opt.id == ans){
                        checked += "checked=\"checked\"";
                    }
                    fieldBox += "<span class=\"col_100 \" name=\"span" + opt.id + "\" id=\"span" + opt.id + "\"><input name=\"" + question.id + "\" value=\""+ opt.id +"\" type=\"radio\" "+checked+">"+opt.name+" </span>"
                }else if(optType==3){
                    if(ans){
                        fieldBox += "<span class=\"col_100 \" name=\"span" + opt.id + "\" id=\"span" + opt.id + "\"><input name=\"" + question.id + "\" value=\""+ ans +"\" type=\"text\" > </span>"
                    }else{
                        fieldBox += "<span class=\"col_100 \" name=\"span" + opt.id + "\" id=\"span" + opt.id + "\"><input name=\"" + question.id + "\" value=\"\" type=\"text\" > </span>"
                    }
                }

            }
            fieldBox += "</div>";
            fieldBox += "</div>";
            html += fieldBox;
        }
        // add
        $("#templateContainer").append(html);
    }

    /**
     * 控制后面的题是否显示
     * @param qList
     */
    function genJS(qList){
        // 答案array
        var ansArr = qList.map(function(q){return q.answer});

        for (question of qList){
            var qId = question.id;

            if(question.hasPre){ //存在前置条件
                $("#field"+qId).hide();
                $("[name='"+qId+"']").attr("disabled","disabled");
                var preOptList = question.preOptList ;
                for(var preOpt of preOptList){
                    var optId = preOpt.key;
                    var preIdxId =$("#span"+optId+" input").attr("name")
                    var idxId = preOpt.value;
                    qRelation.add({
                        key:preIdxId,
                        value:idxId
                    })
                    // 绑定事件
                    bindClick(optId,idxId);
                    bindClick2(optId,idxId);

                    for(var ans of ansArr){
                        if(preOpt.key==ans){ //
                            $("#field"+qId).show();
                            $("[name='"+qId+"']").attr("disabled",false);
                        }

                    }
                }

            }
        }
    }
    /**
     * 绑定事件  选定后显示某题
     * @param optId
     * @param IdxId
     */
    function bindClick(optId,IdxId){
        $("input:radio").bind("click",{optId:optId,IdxId:IdxId},function(event){
            var radioVal = $(this).val();
            if(event.data.optId == radioVal){
                $("#field"+IdxId).show();
                $("[name='"+IdxId+"']").attr("disabled",false);
                $("[name='"+IdxId+"']:checked").click();
            }
        });
    }

    /**
     * 选中兄弟radio 隐藏某题
     * @param optId
     * @param IdxId
     */
    function bindClick2(optId,IdxId){
        $("input:radio").bind("click",{optId:optId,IdxId:IdxId},function(event){
            var radioVal = $(this).val();
            var qid = $("#span"+event.data.optId+" input").attr("name")
            // alert(qid)180620155000129
            var not = $("#field"+qid).find("input:radio").not("[value='"+event.data.optId+"']");
            if(not){
                for(var i = 0;i < not.length ;i++){
                    var opt = not.get(i);
                    if($(opt).val()==radioVal){
                        var arr = qRelation.getArray(IdxId);
                        hide(IdxId)
                        if(arr){
                            for(var s of arr){
                                for(var a of s){
                                    hide(a.value);
                                }
                            }
                        }
                    }
                }
            }
        });
    }
    function hide(idxId){
        $("#field"+idxId).hide();
        $("[name='"+idxId+"']").attr("disabled","disabled");
    }
</script>

